<!-- 能源信息管理 -->
<template>
  <div class='energyInformation card'>
    <div class='left'>
      <div class='title'>
        <span>
          计费类别：
          <span>
            {{type_01|type_01_filter}}
          </span>
          <span>
            <i class='el-icon-minus'></i>
          </span>
          <span>
            {{type_02|type_02_filter}}
          </span>
        </span>
      </div>
      <div>
        <el-date-picker style="width:138px;margin-right:10px" :editable="false" :picker-options="pickerOptions" v-model="value1" :type="d_type" :format="v_type" :value-format="v_type" placeholder="选择日期">
        </el-date-picker>
        <!-- <el-button icon="el-icon-search" type="primary" circle @click='get_date(value1)'></el-button> -->
      </div>
      <div>
        <el-radio-group v-model="type_01">
          <el-radio-button label="D">电</el-radio-button>
          <el-radio-button label="ZQ">蒸汽</el-radio-button>
        </el-radio-group>
      </div>
      <div class='list_radio'>
        <el-radio-group v-model="type_02">
          <el-radio label='1' border>采购单价</el-radio>
          <el-radio label='2' border>核算单价</el-radio>
          <el-radio label='3' border>销售单价</el-radio>
        </el-radio-group>
      </div>
      <div>
        <el-button type="primary" @click="add_open_view">新增</el-button>
      </div>
    </div>
    <div class='right'>

      <div class='list'>
        <router-view></router-view>
      </div>
    </div>
    <!--  ========== () ==========  -->
    <!--  ========== () ==========  -->
    <!--  ========== () ==========  -->
    <!--  ========== () ==========  -->
    <!--  ========== () ==========  -->
    <!--  ========== () ==========  -->
    <!--  ========== () ==========  -->
    <!--  ========== () ==========  -->
    <!--  ========== () ==========  -->
    <!--  ========== () ==========  -->
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { mapMutations } from 'vuex'
import './index.scss'
export default {
  name: 'energyInformation',
  data() {
    return {
      d_type: "date",
      v_type: "yyyy-MM-dd",
      value1: '',
      type_01: 'D',
      type_02: '1',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
    }
  },
  created() {
  },

  methods: {
    ...mapMutations([
      'SET_DATE',
    ]),
    add_open_view() {
      this.$router.push('/systemManagement/energyInformation/add')
    },
    // ========== () ==========
    // ========== () ==========
    // ========== () ==========
    // ========== () ==========
    // ========== () ==========
    // ========== () ==========
    // ========== () ==========
    // ========== () ==========
    // ========== () ==========
    // ========== () ==========
  },
  mounted() { },
  components: {},
  watch: {

    value1: function (n, o) {
      if (n === null) {
        n = ''
      }
      this.SET_DATE(n)
    },
    type_01: function (n, o) {
      this.type_02 = '1'
      if (this.type_01 === 'D') {
        this.$router.push('D1')

      } else if (this.type_01 === 'ZQ') {
        this.$router.push('ZQ1')

      }
    },
    type_02: function (n, o) {
      if (this.type_01 === 'D') {
        if (n === '1') {
          this.$router.push('D1')
        } else if (n === '2') {
          this.$router.push('D2')
        } else if (n === '3') {
          this.$router.push('D3')
        }
      } else if (this.type_01 === 'ZQ') {
        if (n === '1') {
          this.$router.push('ZQ1')
        } else if (n === '2') {
          this.$router.push('ZQ2')
        } else if (n === '3') {
          this.$router.push('ZQ3')
        }
      }
    }
  },
  filters: {
    type_01_filter: function (n) {
      if (n === 'D') {
        return '电'
      } else if (n === 'ZQ') {
        return '蒸汽'
      } else {
        return name
      }
    },
    type_02_filter: function (n) {
      if (n === '1') {
        return '采购单价'
      } else if (n === '2') {
        return '核算单价'
      } else if (n === '3') {
        return '销售单价'
      } else {
        return n
      }
    },

    no_data: function (a, arg1, arg2) {
      if (a === null) {
        return '--'
      } else {
        return a
      }
    }
  },
}

</script>

<style lang='scss' scoped>
// .my-scroll-bar {
//   height: 200px
// }
// .gm-scrollbar.-vertical {
//   background-color:red
// }

// /* horizontal scrollbar track */
// .gm-scrollbar.-horizontal {
//   background-color: transparent
// }

// /* scrollbar thumb */
// .gm-scrollbar .thumb {
//   background-color: rebeccapurple
// }
// .gm-scrollbar .thumb:hover {
//   background-color: fuchsia
// }
</style>